import React from 'react';
import { observer, inject } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import classNames from 'classnames';
import { SearchBar, Card } from 'weaver-mobile';
import { FROMWEITETABKEYS } from '../../../constants/form';
import FillListView from './FillListView';
import NoFilledListView from './NoFilledListView';
import './index.less';
import { Tools } from 'weaver-mobile';
const getLabel = Tools.getLabel;
@inject('writeStore')
@withRouter
@observer
export default class TabCont extends React.Component {
  constructor(props) {
    super(props);

    this.store = props.writeStore;
  }

  componentDidMount() {
    const { getApps, filledLvpStore } = this.store;
    const { _key } = this.props;
    const key = this.props.match.params.key;

    if (!_key && key === FROMWEITETABKEYS.FILLED) {

      filledLvpStore.clearData();
      getApps(key);
    } else if (!_key && key === FROMWEITETABKEYS.NOFILLED) {
      getApps(key);
    }
  }

  render() {
    const { visible = true  } = this.props;
    const _key = this.props._key || this.props.match.params.key;

    if (_key !== FROMWEITETABKEYS.FILLED && _key !== FROMWEITETABKEYS.NOFILLED) {
      return null;
    }

    const { onSearchValChange, filledLvpStore } = this.store; 
   
    return (
      <div className={classNames('edc-mobile-fill-tab-cont', { 'wea-hide': !visible })}>
        <SearchBar placeholder={getLabel('523092','请输入要搜索的内容') } onSubmit={val => onSearchValChange(_key, val)}/>
        <div className='edc-mobile-list'>
          { _key === FROMWEITETABKEYS.FILLED ? 
            <FillListView
              _key={_key}
              visible={visible} 
              store={filledLvpStore}
            /> : 
            <NoFilledListView />
          }
        </div>
      </div>
    )
  }
}